<template>
  <Form ref="editForm" :model="editUser" :rules="rules" @keydown.enter.native="handleSubmit">
    <FormItem label="昵称：" prop="nickname">
      <Input v-model="editUser.nickname" placeholder="请输入用户名"></Input>
    </FormItem>
    <FormItem label="手机号：" prop="phone">
      <Input v-model="editUser.phone" disabled placeholder="请输入手机号"></Input>
    </FormItem>
    <FormItem label="邮箱：">
      <Input v-model="editUser.email" placeholder="请输入邮箱"></Input>
    </FormItem>
    <FormItem label="密码：">
      <Input v-model="editUser.pass" placeholder="请输入密码" type="password"></Input>
    </FormItem>
    <FormItem label="上传头像：">
      <br>
      <div class="avator">
        <img :src="avatorImg">
      </div>
      <Upload
        type="drag"
        name="avatorFile"
        :action="upAvator.url"
        :headers="upAvator.headers"
        :show-upload-list="false"
        accept="image"
        :format="['jpg','jpeg','png','gif']"
        :max-size="20480"
        :before-upload="handleUploadBefore"
        :on-success="handleUploadSuccess"
        :on-format-error="handleUploadErr"
        :on-exceeded-size="handleUploadMaxSize">
        <div style="padding: 20px 0">
          <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
          <p>点击或者将文件拖进来上传</p>
        </div>
      </Upload>
    </FormItem>
    <FormItem label="状态：" prop="state">
      <i-switch
          size="large"
          v-model="state"
          @on-change="stateChange"
        >
          <span slot="open">启用</span>
          <span slot="close">停用</span>
        </i-switch>
    </FormItem>
    <FormItem>
      <div style="width:80%;margin:0 auto;">
        <Button type="primary" :loading="submit" @click="handleSubmit" long>
          <span v-if="!submit">提交</span>
          <span v-else>修改中...</span>
        </Button>
      </div>
    </FormItem>
  </Form>
</template>

<style lang="less" scoped>
.avator {
  height: 126px;
  width: 126px;
  float: left;
  img {
    border-radius: 50px;
    margin: 0 auto;
    margin-top: 13px;
    height: 100px;
    width: 100px;
  }
}
</style>

<script>

import config from '@/config'
import { jwtToken, getImage } from '@/libs/util'

const baseUrl =
  process.env.NODE_ENV === 'development'
    ? config.baseUrl.dev
    : config.baseUrl.pro
export default {
  name: 'addFrom',
  props: {
    nameRules: {
      type: Array,
      default: () => {
        return [
          {
            required: true,
            message: '昵称不能为空',
            trigger: 'blur',
            type: 'string'
          }
        ]
      }
    },
    phoneRules: {
      type: Array,
      default: () => {
        return [
          {
            required: true,
            message: '手机号不能为空',
            trigger: 'blur'
          }
        ]
      }
    },
    editUser: {}
  },
  watch: {
    editUser (val) {
      if (val.email === '#') {
        val.email = ''
      }
      this.avatorImg = getImage(val.avator)
      this.state = val.state
    }
  },
  data () {
    return {
      state: false,
      submit: false,
      avatorImg: getImage(this.editUser.avator),
      upAvator: {
        url: baseUrl + 'upload_avator',
        headers: {
          Authorization: ''
        }
      }
    }
  },
  computed: {
    rules () {
      return {
        nickname: this.nameRules,
        phone: this.phoneRules
      }
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.submit = true
          this.$emit('edit-sumit', this.editUser)
        } else {
          this.submit = false
        }
      })
    },
    stateChange (status) {
      this.editUser.state = status
    },
    handleUploadSuccess (res, file, fileList) {
      if (res.code === 200) {
        this.editUser.avator = res.data.avator
        this.avatorImg = getImage(res.data.avator)
        this.$Notice.success({
          title: res.message
        })
      } else {
        this.$Notice.warning({
          title: res.error
        })
      }
    },
    handleUploadErr (file) {
      this.$Notice.warning({
        title: '文件格式不正确',
        desc: '请上传 PNG,JPGE,GIF 等图片格式'
      })
    },
    handleUploadMaxSize () {
      this.$Notice.warning({
        title: '文件大写不正确',
        desc: '上传的图片不能大于20M'
      })
    },
    handleUploadBefore () {
      this.upAvator.headers.Authorization = jwtToken()
      this.$Notice.success({
        title: '头像上传中...'
      })
    },
    getAccessList () {
      getAccessList().then(res => {
        if (res.data.code === 200) {
          this.accessList = res.data.data
        } else {
          this.$Notice.warning({
            title: res.data.error
          })
          this.accessList = []
        }
      }).catch(() => {
        this.$Notice.warning({
          title: '获取管理员角色失败'
        })
        this.accessList = []
      })
    },
    success () {
      // 创建成功重新初始化
      this.state = false
      this.submit = false
    },
    fail () {
      this.submit = false
    }
  }
}
</script>
